<template>
  <el-dialog
    class="upload-point-image-dialog"
    width="1200px"
    :visible.sync="dialogVisible"
    :title="'上传点位图'"
    :close-on-click-modal="false"
    :append-to-body="true"
    v-dialogDrag="true"
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <el-table v-loading="tableLoading" :data="tableList" height="75vh">
			<el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
			<el-table-column label="单位名称" prop="entrustOrganizationName" align="center">
        <template slot-scope="{row}">
					<span>{{ row.entrustOrganizationName }}</span>
        </template>
      </el-table-column>
			<el-table-column label="设备名称" prop="equipmentName" align="center">
        <template slot-scope="{row}">
					<span>{{ row.equipmentName }}</span>
        </template>
      </el-table-column>
			<el-table-column label="设备编号" prop="equipmentNumber" align="center">
        <template slot-scope="{row}">
					<span>{{ row.equipmentNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="查看" prop="" align="center">
        <template slot-scope="{row}">
					<div style="display: flex; justify-content: center; color: #2979ff;">
            <span style="cursor: pointer;" @click="previewImage(row.recordOssId)" v-if="row.recordOssId">原始记录点位</span>
            <span style="margin-left: 15px; cursor: pointer;" @click="previewImage(row.schematicImage)" v-if="row.schematicImage">报告点位</span>
          </div>
        </template>
      </el-table-column>
			<el-table-column label="操作" align="center" width="120">
        <template slot-scope="{row}">
          <el-button type="text" @click.native.prevent="handleOpenUploadDialog(row)">上传点位图</el-button>
        </template>
      </el-table-column>
		</el-table>
    <div class="dialog-footer" slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
    </div>

    <el-dialog
      class="upload-dialog"
      width="800px"
      :visible.sync="showUploadPointImgDialog"
      :title="'上传点位图'"
      :close-on-click-modal="false"
      :append-to-body="true"
      v-dialogDrag="true"
    >
      <div style="margin: 12px 0; display: flex; justify-content: flex-end;">
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="handleOpenDragCanvas()"
        >设计平面图</el-button>
      </div>
      <div style="display: flex; justify-content: center;">
        <div>
          <imageUpload :limit="1" :isShowTip="false" v-model="recordOssId"/>
          <div style="text-align: center;">原始记录点位图</div>
        </div>
        <div style="margin-left: 50px">
          <imageUpload :limit="1" :isShowTip="false" v-model="schematicImage"/>
          <div style="text-align: center;">报告点位图</div>
        </div>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button type="primary" @click="handleUploadConfirm">确定</el-button>
        <el-button @click="showUploadPointImgDialog = false">取消</el-button>
      </div>
    </el-dialog>

    <DragCanvas ref="dragCanvasRefs" @confirm="handleConfirmDrag" />
  </el-dialog>
</template>

<script>
import DragCanvas from '@/views/slide/components/dragCanvas.vue'
import { entrustEquipmentListAll, editEntrustEquipmentPointImage } from '@/api/person/entrustEquipment'
import { listByIds} from '@/api/system/oss'

export default {
  name: 'UploadPointImageDialog',
  components: { DragCanvas },
  dicts: [],
  props: {
    show: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  data() {
    return {
      tableLoading: false,
      tableList: [],

      currRow: {},
      showUploadPointImgDialog: false,
      recordOssId: '',
      schematicImage: '',
      imageJson: ''
    }
  },
  created() {
  },
  methods: {
    // 弹框打开时
    handleDialogOpen() {
      this.getTableDataList()
    },
    // 弹框关闭时
    handleDialogClosed() {
      this.tableList = []
      this.recordOssId = ''
      this.schematicImage = ''
      this.imageJson = ''
    },
    // 获取表格数据
    getTableDataList() {
      this.tableLoading = true
      entrustEquipmentListAll().then(res => {
				this.tableLoading = false
				this.tableList = res.data || []
			}).catch(err => {
				this.tableLoading = false
			})
    },
    // 预览图片
    previewImage(ossId) {
      if (!ossId) {
        this.$message.error('未上传该点位图')
        return
      }
      listByIds(ossId).then(res => {
        // window.open(res?.data[0]?.url, 'IMG', '_blank')
        window.open(res?.data[0]?.url, '_blank')
      }).catch(err => {})
    },
    // 打开上传弹框
    handleOpenUploadDialog(row) {
      this.currRow = row
      this.recordOssId = row.recordOssId
      this.schematicImage = row.schematicImage
			this.imageJson = row.imageJson
      this.showUploadPointImgDialog = true
    },
    handleOpenDragCanvas() {
      this.$refs.dragCanvasRefs.openDialog({
        imageJson: this.imageJson,
      })
    },
		handleConfirmDrag(data) {
			this.imageJson = data.imageJson
			this.schematicImage = data.ossId
    },
    handleUploadConfirm() {
      const data = {
        equipmentId: this.currRow.equipmentId,
        recordOssId: this.recordOssId,
        schematicImage: this.schematicImage,
			  imageJson: this.imageJson
      }
      editEntrustEquipmentPointImage(data).then(res => {
        this.$message.success('上传成功')
        this.showUploadPointImgDialog = false
        this.getTableDataList()
      }).catch(err => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-point-image-dialog {

  ::v-deep .el-dialog__body {
    max-height: 80vh;
    overflow-y: auto;
  }
}
</style>